<template>
  <div>
     <ul class="nav row">
        <li class="col-md-1 col-sm-1 col-xs-1" v-for="item in menuList">
        <router-link :to="{path:'/category',query:{cid:item.id,cname:item.name}}">
        <a>{{item.name}}</a>
        </router-link>
        </li>
     </ul>
     <slide-show :slides="slides"></slide-show>

     <keep-alive>
       <router-view></router-view>
     </keep-alive>
  </div>
</template>

<script>
import api from '../api'
import SlideShow from './slide'
export default {
  components:{
    SlideShow
  },
  data () {
    return {
      menuList:[],
      slides:[
        {
          src: require('../assets/1.jpg'),
          title: 'xxx1',
          href: 'detail/analysis'
        },
        {
          src: require('../assets/2.jpg'),
          title: 'xxx2',
          href: 'detail/count'
        },
        {
          src: require('../assets/3.jpg'),
          title: 'xxx3',
          href: 'http://xxx.xxx.com'
        },
        {
          src: require('../assets/4.jpg'),
          title: 'xxx4',
          href: 'detail/forecast'
        }
      ]
    }
  },
  created(){
    this.get()
  },
  methods:{
    get(){
      this.$http.get("/api/data").then((res)=>{
       this.menuList=res.data.data.catList
       
      })
    }
  },
  wathch:{
    '$route':'get'
  }
}
</script>
<style scoped>
ul {
  list-style-type: none;
  background:red;margin-top:1rem;
}
ul li{
  display:block;
	height:60px;line-height:60px;
}
ul li:hover{
  background: #b8860b;
}
ul li a{
	font-size:16px; padding-left:10px;color:yellow;text-decoration: none;
}

</style>
